<template>
    <div>
        <headerSearch :title="headerTitle" :searchBack="true" @done="gotobtn"></headerSearch>
        <!-- 搜索框 -->
        <div class="search_all_intop" :style="search_intop" v-if="searchISshow"> </div>
        <div class="search_all" v-if="searchISshow">
            <span class="search_span clear">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" v-model="search" placeholder="搜索">
                <i class="iconfont icon-guanbi" v-if="clearShow" @click="clearClick"></i>
            </span>
            <button class="search_cancel fr" @click="searchCancel">取消</button>
        </div>
       
        <div class="pagecontent">
            <div class="business_lists clear main-user-company" v-for="(list, l) in companylist" :key="l">
                <div  class="clear fl" style="margin: 0.2rem;" @click="JumpcompanyList([list.id,list.auth_flag,list.name,list.check])">
                    <div class="business_left_usercompany fl" style="margin-right: 0.2rem;">
                        <img :src="list.log_img" v-if="list.log_img">
                        <img src="../common/images/youquan.png" alt="" v-else>
                    </div>
                    <div class="business_desc fr">
                        <h5>{{list.name}}</h5>

                        <p v-if="list.description">{{list.description}}</p>
                        <p v-else>暂无简介</p>
                    </div>
                </div>
                <div class="btn_small_red fr" style="margin-right: 0.2rem;" @click="JumpcompanyList([list.id,list.auth_flag,list.name,list.check])">
                    <button v-if="list.check == 0">待通过</button>
                    <button v-else-if="list.auth_flag == 2">已认证</button>
                    <button v-else-if="list.auth_flag == 1">待审核</button>
                    <button v-else="list.auth_flag == 0 ">未认证</button>
                </div>
            </div>
            <!-- <infinite-loading @infinite="infiniteHandler">
              <span slot="no-more" v-if="companylist.length">
                (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
              </span>
              <span slot="no-more" v-if="!companylist.length">
                  暂无数据  ╮(￣▽￣)╭
              </span>
            </infinite-loading> -->
            <!-- <div v-if="companylist.length === 0" style="font-size: 0.3rem; color: #666; margin-top:1rem;">
                暂无数据  ╮(￣▽￣)╭
            </div> -->
            <div v-if="companylist.length === 0" class="contentEmpty" style="margin-top: 1.2rem;">
                <img src="../common/images/Disappointment.png" alt="">
                <em>暂无查询结果</em>
            </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import InfiniteLoading from 'vue-infinite-loading';
import {
    MessageBox
  } from 'mint-ui';
    export default {
        data() {
            return {
                headerTitle: '我的企业',
                userInfo: '',
                // companylist:[],
                path: this.$path,
                searchISshow: false,   //关键字搜索框出现
                clearShow: false,      //清除内容
                search: '',            //输入内容
                items: [],
                search_intop: '',
                // page:0,
                // num:10,
            }
        },
        components: {
            headerSearch,
            // InfiniteLoading
        },
        created() {
            let that = this;
            that.userInfo = window.localStorage.getItem('userInfo');
            that.userInfo = JSON.parse(that.userInfo);
            that.getCompanyList(that.userInfo.uid);
        },
        watch: {
            search(value) {
                if(value != '') {
                  this.clearShow = true;
                  this.search_intop = 'background-color: transparent; z-index: 0;'
                }else {
                  this.clearShow = false;
                  this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);'
                }
            }
        },
        methods: {
            // infiniteHandler($state) {
            //     let that = this;
            //       setTimeout(() => {       
            //           const temp = []; 
            //           let keyword = this.search;
            //           if(!keyword) keyword = 0;
            //           let page = that.page;
            //           that.$fetch(that.$path+'/api.php/company/getUserAllCompanyList', {page, keyword})
            //             .then((res) => {
            //               console.log('首页',res);
            //             if(res.code == 200){
            //               let array = res.data.list;
            //               that.page++;
            //               if(that.num > array.length){
            //                 $state.complete();
            //                 return;
            //               }
            //               array.forEach(element => {
            //                 temp.push(element);
            //               });
            //               that.items = that.items.concat(temp);  
            //               $state.loaded(); 
            //             }else {
            //                 $state.complete();
            //                 return;
            //             }
            //         });  
            //       }, 1000);
            // },
            infoClick() {
                this.$router.push({
                    path: '/information'
                })
            },
            getCompanyList: function (uid) {
                let that = this;
                // console.log('uid',uid);
                // let keyword = this.search;
                // if(!keyword) keyword = 0;
                // let page = that.page;
                this.$fetch(that.$path + '/api.php/company/getUserAllCompanyList', {
                    userId: uid
                  })
                  .then((res) => {
                    console.log(res);
                      if(res.code == 200) {
                          if (res.data.count < 1) {
                            that.items = '';
                          } else {
                            //计算头像的宽度
                            // that.companyLiAvatarHeight = that.companyLiWidth * 0.2;
                            // that.companyWidth = (Number(res.data.list.length) + 1) * (that.companyLiWidth + 15) + 10;
                            that.items = res.data.list;
                            console.log('that.items', that.items)
                          }
                      }
                  });
              },
            JumpcompanyList: function (event) {
              // console.log('99999=>',event[1]);return false;
              // 获取flag标记，如果属于待认证跳转到认证页面，否则跳转到企业资料页面。
              if (event[3] == 0) {
                MessageBox('提示', '等待管理员审核...')
                return false;
              }else if(event[1] == 1) {
                MessageBox('提示', '企业审核中...')
                return false;
              }else if (event[1] == 0) {
                MessageBox.confirm('', {
                  message: '企业未认证，是否认证？',
                  title: '提示',
                  confirmButtonText: '去认证',
                  cancelButtonText: '取消'
                }).then(action => {
                  if (action == 'confirm') { //确认的回调
                    this.$router.push({
                      path: '/Certification',
                      query: {
                        companyId: event[0],
                        companyName: event[2]
                      }
                    })
                  }
                }).catch(err => {
                  if (err == 'cancel') { //取消的回调
                    return false;
                  }
                });
                return false;
              } else {
                this.$router.push({
                  path: '/userCenter/companyData',
                  query: {
                    cpId: event[0]
                  }
                });
              }
          },
          // 点击搜索图标出现搜索框
          gotobtn() {
            this.searchISshow = true;
          },
          // 点击取消隐藏搜索框
          searchCancel() {
            this.searchISshow = false;
            this.search = '';
          },
          // 清除内容
          clearClick() {
            this.search = '';
          }
        },
        computed: {
            //过滤方法
          companylist: function() {
            let that = this;
              var _search = that.search;
              if (_search) {
                  //不区分大小写处理
                  var reg = new RegExp(_search, 'ig')
                  //es6 filter过滤匹配，有则返回当前，无则返回所有
                  return that.items.filter(function(e) {
                      //匹配所有字段
                      return Object.keys(e).some(function(key) {
                          let data = e.name + e.description + e.admin_job;
                          return data.match(reg);
                      })
                      //匹配某个字段
                      //  return e.name.match(reg);
                  })
              };
              return that.items;
          }
        },  
    }
</script>

<style>
.main-user-company {
    background-color: #fff;
}

.business_left_usercompany {
    width: 1rem;
    height: 1rem;
    text-align: center;
    vertical-align: middle;
}
.business_left_usercompany img {
    height: 1rem;
    max-width: 100%;
    max-height: 100%;
}

/* 关键字搜索 */
.search_all_intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
}
.search_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    background-color: #e50838;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
}
.search_all .search_span {
    position: relative;
    width: 100%;
    height: 0.88rem;
}
.search_all .search_span .icon-sousuo {
    font-size: 0.3rem !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0.16rem 0.2rem 0 -0.6rem;
    box-sizing: border-box;
    height: 0.88rem;
    margin-bottom: -0.3rem;
}
.search_all .search_span input {
    display: inline-block;
    width: 6.5rem;
    margin: 0 auto;
    margin-left: -0.7rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background-color: #fff;
    margin-top: -0.1rem;
    border-radius: 4px;
    padding-left: 0.5rem;
    font-size: 0.28rem;
}
.search_all .search_span .icon-guanbi {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.14rem 0.12rem 0 0.12rem;
}
.search_all .search_cancel {
    margin-top: -0.65rem;
    margin-right: 0.12rem;
    font-size: 0.28rem;
    color: #fff;
}
</style>